<template>
  <div class="song-list-page" :class="playing?'box-margin':''">
    <van-cell :title="'搜索内容:'+hotSearch" />
    <ul>
      <li class="item" v-for="(item, index) in searchList" :key="item.id" @click="onMusic(item)">
        <p class="index">{{ index + 1 }}</p>
        <div class="content">
          <h3 class="name">{{ item.name }}</h3>
          <p class="info">
            {{ item.ar }}-{{ item.al.name }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script  type='module'>
import { mapState } from 'vuex'
export default {
  name: 'SearchMusicList',
  props: {
    searchList: Array, hotSearch: String
  },
  data () {
    return {
      playList: []
    }
  },
  methods: {
    // 点击音乐列表
    onMusic (item) {
      // 在播放列表中查找点中的音乐
      const index = this.playList.findIndex((item2) =>
        item2.id === item.id
      )
      // 播放列表中没有该音乐直接添加
      if (index === -1) {
        this.playList.unshift(item)
        // 播放列表中有该音乐时删除后添加
      } else {
        this.playList.splice(index, 1)
        this.playList.unshift(item)
      }
      this.songCickAction()
      // console.log(index)
      // console.log(this.playList)
    },
    songCickAction (index = 0) {
      // 将用户点击的歌曲列表下标和当前的歌曲列表传递给store
      this.$store.commit({
        type: 'player/selectSongByIndex', // commit的事件名称
        index: index, // 参数，点击的下标
        list: this.playList// 参数，整个歌单列表
      })
    }
  },
  computed: {
    ...mapState({
      // 播放状态
      playing: (state) => state.player.playing
    })
  }

}
</script>
<style scoped lang="less">
.song-list-page {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  .item {
    border-bottom: 1px solid #eee;
    display: flex;
    padding: 10px;
    .index {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      flex-shrink: 0;
      margin: 0;
    }
    .content {
      flex: 1;
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
    }
    .name {
      font-size: 16px;
      font-weight: normal;
      margin: 0;
    }
    .info {
      width: 100%;
      font-size: 13px;
      color: #555;
      line-height: 22px;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.box-margin {
  padding-bottom: 48px;
}
</style>
